<template>
    <div class="selectCity">
        <div class="search_wrap">
            <div class="search">
                <i class="fa fa-search"></i>
                <input type="text" placeholder="请输入城市名" v-model="city_val">  
            </div>
            <button @click="$router.push({name:'vaddress',params:{city:city}})">取消</button>
        </div>
        <div style="height: 100%" v-if="searchList.length == 0">
            <div class="location">
                <location :address="city"/>
            </div>
            <alphabet :cityinfo="cityinfo" :keys="keys" ref="allCity" @selectCity="selectCity"/>
        </div>
        <div class="search_list" v-else>
            <ul>
                <li v-for="(item,index) in searchList" :key="index" @click="selectCity(item)">{{item.city_name}}</li>
            </ul>
        </div>
    </div>
  </template>

<script>
    import location from '../components/location.vue'
    import alphabet from '../components/alphabet.vue'
    import {
        getAllCity
    } from '../networks/api.js';
    export default {
        name: 'selectCity',
        data() {
            return {
                city_val: "",
                cityinfo: null, //把请求到的全国城市数据存储起来
                keys: [], //各大标题title储存起来
                allCities: [], //存储遍历后的城市
                searchList: [],
            }
        },
        computed: {
            city() {
                return (this.$store.getters.location.addressComponens.city || this.$store.getters.location.addressComponens.province)
            }
        },
        components: {
            location,
            alphabet
        },
        //一进来这个页面调用这个函数
        created() {
            this.getCityinfo(); //获取所有城市信息
        },
        watch: {
            city_val() {
                //console.log(this.city_val);
                this.searchCity();
            }
        },
        methods: {
            getCityinfo() {
                //发起一个请求
                getAllCity().then(res => {
                    this.cityinfo = res.data; //所有数据存储起来
                    this.keys = Object.keys(res.data);
                    this.keys.pop(); //热门城市移除掉
                    //等全部数据加载完再实现滚动
                    this.$nextTick(() => {
                        this.$refs.allCity.initScroll();
                    });
                    //存储所有城市。用来搜索过滤
                    this.keys.forEach(key => {
                        //console.log(key);
                        //每个key下面有很多城市，根据这个key来遍历
                        this.cityinfo[key].forEach(city => {
                            //console.log(city);
                            this.allCities.push(city)
                        })
                    })
                })
            },
            selectCity(city) {
                //console.log(city.city_name)
                this.$router.push({
                    name: "vaddress",
                    params: {
                        city: city.city_name
                    }
                })
            },
            searchCity() {
                //如果搜索框为空，数组置空
                if (!this.city_val) {
                    this.searchList = [];
                } else {
                    //根据输入框的关键字检索城市，并存入到searchList数组中
                    this.searchList = this.allCities.filter(item => {
                        return item.city_name.indexOf(this.city_val) != -1;
                    });
                    console.log(this.searchList);
                }
            }

        },
    }
</script>
<style scoped>
    .selectCity {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        padding-top: 45px;
    }
    
    .search_wrap {
        position: fixed;
        top: 0;
        height: 45px;
        width: 100%;
        background: #fff;
        box-sizing: border-box;
        padding: 3px 16px;
        display: flex;
        justify-content: space-between;
    }
    
    .search {
        background-color: #eee;
        border-radius: 10px;
        line-height: 40px;
        width: 85%;
        box-sizing: border-box;
        padding: 0 16px;
    }
    
    .search input {
        background: #eee;
        outline: none;
        border: none;
        margin-left: 5px;
    }
    
    .search_wrap button {
        outline: none;
        color: #009eef;
    }
    
    .location {
        background: #fff;
        padding: 8px 16px;
        height: 65px;
        box-sizing: border-box;
    }
    
    .search_list {
        background: #fff;
        padding: 5px 16px;
    }
    
    .search_list li {
        padding: 10px;
        border-bottom: 1px solid #eee;
    }
</style>